<template>
	<view>
		<view class="body after-navber">
		    <view style="overflow-x: hidden">
		        <view class="status-bar">
		            <image mode="aspectFill" src="/static/images/1DypCvLtKFAo2ZnG.png"></image>
		            <text>{{ order.status_text }}</text>
		        </view>
		        <navigator
		            class="block flex-row"
		            :url="'/pages/express-detail/express-detail?id=' + order.id + '&order_type=' + order.type"
		            v-if="order.status == 2"
		        >
		            <view class="flex-grow-1">
		                <view class="mb-10">快递公司：{{ order.express }}</view>
		                <view class="">快递单号：{{ order.express_no }}</view>
		            </view>
		            <view class="flex-grow-0 flex-y-center">
		                <image src="/static/images/icon-jiantou-r.png" style="width: 12rpx; height: 22rpx"></image>
		            </view>
		            <view class="block-row flex-row" v-if="false">
		                <view class="flex-grow-1">快递单号：{{ order.express_no }}</view>
		                <view class="flex-grow-0">
		                    <text @tap="copyText" class="copy-text-btn" :data-text="order.express_no">复制</text>
		                </view>
		            </view>
		        </navigator>
		        <view class="block">
		            <view class="flex-row block-row">
		                <view class="flex-grow-1">收货人：{{ order.consignee }}</view>
		                <view class="flex-grow-0">
		                    {{ order.phone }}
		                </view>
		            </view>
		            <view v-if="order.addr">收货地址：{{ order.addr }}</view>
		        </view>
		  
		        <view class="block">
		            <view class="block-row flex-row">
		                <view class="flex-grow-1">订单编号：{{ order.order_no }}</view>
		                <view class="flex-grow-0">
		                    <text @tap="copyText" class="copy-text-btn" :data-text="order.order_no">复制</text>
		                </view>
		            </view>
		            <view>下单时间：{{ order.createtime }}</view>
		            <view class="pay-type">{{ order.pay_type_text }}</view>
		        </view>
		        <view class="block">
		            <view class="flex-row block-row">
		                <view class="flex-grow-1">商品总额</view>
		                <view class="flex-grow-0" v-if="order.pay_type == 'score'">{{ order.total_goods_score }}{{money_name}}</view>
		                <view class="flex-grow-0" v-else>￥{{ order.total_goods_price }}</view>
		            </view>
		            <view class="flex-row block-row">
		                <view class="flex-grow-1">商品数量</view>
		                <view class="flex-grow-0">×{{ order.number }}</view>
		            </view>
		            <view class="flex-row block-row" v-if="order.coupons_id">
		                <view class="flex-grow-1">优惠券优惠</view>
		                <view class="flex-grow-0">-￥{{ order.coupon_fee }}</view>
		            </view>
		
		            <view class="flex-row block-row">
		                <view class="flex-grow-1">运费</view>
		                <view class="flex-grow-0">￥{{ order.delivery_price }}</view>
		            </view>
		            <view v-if="order.remark">
		                <view>买家留言</view>
		                <view style="width: 100%; overflow: auto; word-wrap: break-word">{{ order.remark }}</view>
		            </view>
		            <view v-if="order.memo">
		                <view>商家留言</view>
		                <view class="fs-sm" style="width: 100%; overflow: auto; word-wrap: break-word">{{ order.memo }}</view>
		            </view>
		            <view class="block-footer">
		                合计：
		                <text style="color: #ff4544" v-if="order.pay_type == 'score'">{{order.score_amount}}{{money_name}} + ￥{{ order.total_fee }}</text>
						<text style="color: #ff4544" v-else>￥{{ order.pay_fee }}</text>
		            </view>
		        </view>
		        <view class="block">
		            <view class="flex-row goods-item" v-for="(item, index) in order.item" :key="item.id">
		                <view class="flex-grow-0">
		                    <navigator style="font-size: 0" :url="'/pages2/shop/goods-detail/goods-detail?id=' + item.product_id">
		                        <image mode="aspectFill" :src="item.product_image" style="width: 156rpx; height: 156rpx"></image>
		                    </navigator>
		                </view>
		
		                <view class="flex-grow-1" style="padding-left: 20rpx">
		                    <view style="margin-bottom: 10rpx">
		                        <navigator :url="'/pages2/shop/goods-detail/goods-detail?id=' + item.product_id">{{ item.product_title }}</navigator>
		                    </view>
		                    <view class="flex-row">
		                        <view class="flex-grow-1">
		                            <view style="font-size: 9pt; color: #888; margin-right: 20rpx;margin-top: 10rpx; display: inline-block" >
		                              {{item.product_sku_text ? item.product_sku_text : '默认'}}
		                            </view>
									<view style="font-size: 9pt; color: #888; margin-right: 20rpx; display: block"  v-if="order.pay_type == 'score'">
									  {{item.product_score}}{{money_name}}
									</view>
									<view style="font-size: 9pt; color: #888; margin-right: 20rpx; display: block" v-else>
									  ￥{{item.product_price}}
									</view>
		                        </view>
		                        <view class="flex-grow-0" style="text-align: right">
		                            <view>×{{ item.goods_num }}</view>
		                         
		                        </view>
		                    </view>
		                    <view v-if="order.status == 1 || (order.status == 4 && item.aftersale_status == 0 && item.dispatch_status == 0)">
		                        <navigator class="flex-y-center refund-btn" :url="'/pages2/shop/order-refund/order-refund?order_id=' + order.id+'&order_item_id='+item.id" v-if="item.aftersale_status == 0">
		                            申请退款
		                        </navigator>
		                    </view>
							
		                    <view v-if="order.status == 2||order.status == 3 || (order.status == 4 && item.aftersale_status == 0&& item.dispatch_status != 0)">
		                        <navigator class="flex-y-center refund-btn" :url="'/pages2/shop/order-refund/order-refund?order_id=' + order.id+'&order_item_id='+item.id" v-if="item.aftersale_status == 0">
		                            申请售后
		                        </navigator>
		                  
		                    </view>
							  <text class="refund-text" v-if="item.aftersale_status != 0">已申请售后</text>
		                </view>
		            </view>
		        </view>
		        <view class="order-footer flex-y-center flex-x-right flex-row" v-if="order.status == 4">
		            <view>售后申请中</view>
		        </view>
		        <view class="order-footer flex-y-center flex-x-right flex-row" v-if="order.status == 1 && order.is_pay == 1 && order.status != 4">
		            <view class="play-btn">
		                <view @tap="orderRevoke" :data-id="order.order_id">申请售后</view>
		            </view>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
	import {Order} from '../../../apirequest/order-model.js';
	var o = new Order();
	export default {
		data() {
			return {
			order:{},
			id:0,
			money_name:this.globalData.money_name,
			}
			
		},
		onLoad(options) {
			this.id = options.id
			
		},
		onShow() {
			this._index()
		},
		methods: {
			_index(){
				var that = this;
				o.get_detail({id:this.id},(res) => {
					if(res.code == 1){
						that.order = res.data
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			copyText: function (e) {
			    var t = e.currentTarget.dataset.text;
			   uni.setClipboardData({
			        data: t,
			        success: function () {
			          uni.showToast({
			                title: '已复制'
			            });
			        }
			    });
			},
			orderRevoke(){
				var that = this;
				uni.navigateTo({
					url:"/pages2/shop/order-refund/order-refund?order_id="+that.id
				})
			}
		}
	}
</script>

<style>
page {
    overflow-x: hidden;
}

.status-bar {
    box-sizing: border-box;
    padding: 0 88rpx;
    color: #fff;
    font-size: 13pt;
    height: 120rpx;
    line-height: 120rpx;
    position: relative;
    z-index: 8;
}

.status-bar image {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.block {
    background: #fff;
    padding: 32rpx 24rpx;
    margin-bottom: 20rpx;
}

.block .block-row {
    margin-bottom: 10rpx;
}

.block .block-footer {
    border-top: 1rpx solid #eee;
    margin-left: -24rpx;
    margin-right: -24rpx;
    padding: 24rpx;
    padding-bottom: 0;
    margin-top: 32rpx;
    text-align: right;
    font-weight: bold;
}

.goods-item {
    border-bottom: 1rpx solid #e3e3e3;
    padding-bottom: 32rpx;
    margin-bottom: 32rpx;
}

.goods-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.refund-btn {
    float: right;
    height: 60rpx;
    border: 1rpx solid #bbb;
    padding: 0 30rpx;
    border-radius: 10rpx;
    margin-top: 20rpx;
}

.refund-text {
    float: right;
    display: inline-block;
    margin-top: 20rpx;
}

.pay-type {
    width: 100%;
    padding: 32rpx 0 8rpx 0;
    border-top: 1rpx solid #e2e2e2;
    margin-top: 32rpx;
}

.play-btn {
    height: 64rpx;
    border: 1rpx solid #ff5c5c !important;
    color: #ff5c5c;
    border-radius: 10rpx;
    line-height: 64rpx;
    text-align: center;
    padding: 0 20rpx !important;
    margin: 0 0 0 24rpx !important;
    background-color: transparent !important;
}

.order-footer {
    height: 98rpx;
    margin-top: 20rpx;
    border-top: 1rpx solid #e2e2e2;
    background-color: #ffffff;
    padding: 0 24rpx;
    text-align: right;
    justify-content: flex-end;
}
</style>
